<template>
  <div>
    <el-row :gutter="20" v-loading='loading'>
      <el-col :span="24">
        <div class="grid-content">
          <el-tabs v-model="configItem" type="card" @tab-click="switchTabPane">
            <el-tab-pane label="商品样式" name="goodsStyle">
              <el-col :span="6">
                <div class="layout">
                  <img class="preImg" v-if="goodsType" src="../../smartlight/common/imgs/small.jpg" />
                  <img class="preImg" v-if="!goodsType" src="../../smartlight/common/imgs/list.jpg" />
                </div>
              </el-col>
              <el-col :span="18">
                <div class="ml20 mt20">
                  <el-radio-group  v-model="goodsStyle" @change="changeGoodsStyle">
                    <el-radio class="radio"  label="small">小图</el-radio>
                    <el-radio class="radio"  label="list">列表</el-radio>
                  </el-radio-group>
                </div>
                <div class="ml20 mt40">
                  <el-button :disabled="!modifyStyle" type="primary" size="small" @click="doUpdateStyle" v-if="getAuth(0)">保存</el-button>
                </div>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="轮播图" name="lunbo">
              <el-col :span="6">
                <div class="layout">
                  <img class="preImg" src="../../smartlight/common/imgs/luobo.jpg" />
                </div>
              </el-col>
              <el-col :span="18">
                <div style="margin-bottom: 10px;margin-left: 710px;">
                  <el-button type="primary" size="small" @click="openPicDialog(1)" v-if="getAuth(1)">添加轮播图</el-button>
                </div>
                <div class="ml20">
                  <el-table :data="lunboList" border style="width: 771px;">
                    <el-table-column align="center" label="轮播图" width="150">
                      <template scope="scope">
                        <img class="img-size" :src="urlPrefix + scope.row.lunboUrl" />
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="链接类型" width="200">
                      <template scope="scope">
                        <span>{{linkType2CH(scope.row.linkType)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="链接路径" width="240">
                      <template scope="scope">
                        <span>{{scope.row.linkUrl === ''?'/':scope.row.linkUrl}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                      <template scope="scope">
                        <el-button  type="warning" size="small" @click="openPicDialogtoEdit(1,scope.$index)" v-if="getAuth(2)">编辑</el-button>
                        <el-button size="small" type="danger" @click="delConfPic(scope.$index)" v-if="getAuth(3)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="导航" name="navigate">
              <el-col :span="6">
                <div class="layout">
                  <img class="preImg" src="../../smartlight/common/imgs/navigate.jpg" />
                </div>
              </el-col>
              <el-col :span="18">
                <div style="margin-bottom: 10px;margin-left: 800px;">
                  <el-button type="primary" size="small" @click="openPicDialog(2)" v-if="getAuth(4)">添加导航</el-button>
                </div>
                <div class="ml20">
                  <el-table :data="navigateList" border style="width: 851px;">
                    <el-table-column align="center" label="导航图" width="150">
                      <template scope="scope">
                        <img class="img-size" :src="urlPrefix + scope.row.navigateUrl" />
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="导航名称" width="140">
                      <template scope="scope">
                        <span>{{scope.row.navigateName}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="链接类型" width="140">
                      <template scope="scope">
                        <span>{{linkType2CH(scope.row.linkType)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="链接路径" width="240">
                      <template scope="scope">
                        <span>{{scope.row.linkUrl === ''?'/':scope.row.linkUrl}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                      <template scope="scope">
                        <el-button type="warning" size="small" @click="openPicDialogtoEdit(2,scope.$index)" v-if="getAuth(5)">编辑</el-button>
                        <el-button size="small" type="danger" @click="delConfPic(scope.$index)" v-if="getAuth(6)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="首页推荐" name="indexRecommend">
              <el-col :span="6">
                <div class="layout">
                  <img class="preImg" src="../../smartlight/common/imgs/indexRecom.jpg" />
                </div>
              </el-col>
              <el-col :span="18">
                <div style="margin-bottom: 10px;margin-left: 700px;">
                  <el-button type="primary" size="small" @click="openPicDialog(3)" v-if="getAuth(7)">添加首页推荐</el-button>
                </div>
                <div class="ml20">
                  <el-table :data="indexRecommendList" border style="width: 771px;">
                    <el-table-column align="center" label="推荐图" width="150">
                      <template scope="scope">
                        <img class="img-size" :src="urlPrefix + scope.row.recommendUrl" />
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="链接类型" width="200">
                      <template scope="scope">
                        <span>{{linkType2CH(scope.row.linkType)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="链接路径" width="240">
                      <template scope="scope">
                        <span>{{scope.row.linkUrl === ''?'/':scope.row.linkUrl}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                      <template scope="scope">
                        <el-button type="warning" size="small" @click="openPicDialogtoEdit(3,scope.$index)" v-if="getAuth(8)">编辑</el-button>
                        <el-button size="small" type="danger" @click="delConfPic(scope.$index)" v-if="getAuth(9)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="商品推荐" name="goodsRecommend">
              <el-col :span="6">
                <div class="layout">
                  <img class="preImg" src="../../smartlight/common/imgs/goodsRecom.jpg" />
                </div>
              </el-col>
              <el-col :span="18">
                <div style="margin-bottom: 10px;margin-left: 850px;">
                  <el-button type="primary" size="small" @click="openGoodsDialog" v-if="getAuth(10)">添加商品推荐</el-button>
                </div>
                <div class="ml20">
                  <table style="border-collapse: collapse;" class="tablecss">
                    <tr>
                      <th style="width:120px;">商品推荐名称</th>
                      <th style="width:120px;">列表样式</th>
                      <th style="width:100px;">商品id</th>
                      <th style="width:120px;">商品名称</th>
                      <th style="width:180px;">商品主图</th>
                      <th style="width:100px;">商品价格</th>
                      <th style="width:160px;">操作</th>
                    </tr>
                    <tr v-for="(item, index) in goodsRecommendList" :key="index">
                      <td>
                        {{item.goodsRecommendName}}
                      </td>
                      <td>
                        {{style2CH(item.style)}}
                      </td>
                      <td>
                        <div class="padd-18-0" :class="sindex!==(item.goods.length-1)?'border-b':''" v-for="(good, sindex) in item.goods" :key="sindex">
                          {{good.goodsId}}
                        </div>
                      </td>
                      <td class="shopname">
                        <div class="padd-15-0" :class="sindex!==(item.goods.length-1)?'border-b':''" v-for="(good, sindex) in item.goods" :key="sindex">
                          <img class="img-size" src="../../../static/images/pin.png" v-if="good.isGroup" style="width:20px;height:20px;"/>{{good.goodsName}}
                        </div>
                      </td>
                      <td>
                        <div :class="sindex!==(item.goods.length-1)?'border-b':''" v-for="(good, sindex) in item.goods" :key="sindex">
                          <img class="img-size" :src="urlPrefix + good.goodsMainUrl" />
                        </div>
                      </td>
                      <td>
                        <div class="padd-18-0" :class="sindex!==(item.goods.length-1)?'border-b':''" v-for="(good, sindex) in item.goods" :key="sindex">
                          {{good.goodsPrice}}
                        </div>
                      </td>
                      <td>
                        <el-button type="warning" size="small" @click="editGoodsDialog(item, index)" v-if="getAuth(11)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deletGoodsRecommend(index)" v-if="getAuth(12)">删除</el-button>
                      </td>
                    </tr>
                    <tr v-if="goodsRecommendList.length==0">
                      <td colspan="8"><span style="height:60px;line-height:60px;color:#5e7382">暂无数据</span></td>
                    </tr>
                  </table>
                </div>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <!-- 轮播图 -->
    <el-dialog :title="picTitle" :visible.sync="pictureDialog" :close-on-click-modal="false" @close="closePicDialog" size="tiny">
      <div v-loading="addPicLoading">
        <el-form :model="addPicture" ref="addPicture" :rules="rules">
          <el-form-item v-show="showNavigateName" label="导航名称" prop="navigateName">
            <el-input size="small" style="width:200px;" v-model="addPicture.navigateName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="链接类型">
            <el-select size="small" style="width:200px;" v-model="addPicture.linkType" @change="changeLinkType">
              <el-option label="无" value="none"></el-option>
              <el-option label="全部产品" value="goods"></el-option>
              <el-option label="产品分组" value="goodTypes"></el-option>
              <el-option label="产品详情" value="goodsDetail"></el-option>
              <el-option label="关于我们" value="about"></el-option>
              <el-option label="常见问题" value="helpCenter"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="showLinkUrl" label="链接路径" prop="linkUrl">
            <el-input v-show="!copyValueShow" size="small" style="width:200px;" v-model="addPicture.linkUrl" disabled auto-complete="off"></el-input>
            <el-input v-show="copyValueShow" size="small" style="width:200px;" v-model="copyLinkUrl" disabled auto-complete="off"></el-input>
          </el-form-item>
          <div v-show="showLinkUrl && (addPicture.linkType === 'goodTypes')" style="margin: 10px 0px;">
            <div style="margin-left:12px;">请选择商品分组：</div>
            <table class="mt10" style="border-collapse: collapse;width:400px;margin-left:13px;">
              <tr>
                <th></th>
                <th style="width:120px;">分组名称</th>
                <th style="width:79px;">列表样式</th>
                <th style="width:158px;">分组描述</th>
              </tr>
              <tr v-for="(item, index) in goodsGroupData" :key="index">
                <td>
                  <input name="groupsRadio" :data-index="item.id" type="radio" @click="selGroupRadio(item)" :checked="tmpLinkUrl === item.id" />
                </td>
                <td>{{item.name}}</td>
                <td>{{item.style === 'small'?'小图':'列表'}}</td>
                <td>
                  <span :title="item.describ">
                    {{describPackage(item.describ)}}
                  </span>
                </td>
              </tr>
              <tr v-if="goodsGroupData.length===0">
                <td colspan="4"><span style="height:60px;line-height:40px;color:#5e7382">暂无数据</span></td>
              </tr>
            </table>
            <div v-if="goodsGroupTotal!==0" style="text-align:right;margin-top:10px;">
              <el-pagination small layout="prev, pager, next" :total="goodsGroupTotal" :page-size="5" :current-page.sync="goodsGroupPage" @current-change="findGoodsGroups"></el-pagination>
            </div>
          </div>
          <div v-show="showLinkUrl && (addPicture.linkType === 'goodsDetail')" style="margin: 10px 0px;">
            <div style="margin-left:12px;">请选择指定商品：</div>
            <table class="mt10" style="border-collapse: collapse;width:400px;margin-left:13px;">
              <tr>
                <th></th>
                <th style="width:119px;">商品名称</th>
                <th style="width:119px;">商品主图</th>
                <th style="width:119px;">商品价格</th>
              </tr>
              <tr v-for="(item, index) in addTmpGoods" :key="index">
                <td>
                  <input name="goodsRadio" type="radio" @click="selGoodsRadio(item)"  :checked="tmpLinkUrl === item.goodsId"/>
                </td>
                <td><img class="img-size" src="../../../static/images/pin.png" v-if="item.isGroup" style="width:20px;height:20px;"/>{{item.goodsName}}</td>
                <td>
                  <img class="img-size2" :src="urlPrefix + item.goodsMainUrl" />
                </td>
                <td>{{item.goodsPrice}}</td>
              </tr>
              <tr v-if="addTmpGoods.length==0">
                <td colspan="4"><span style="height:60px;line-height:40px;color:#5e7382">暂无数据</span></td>
              </tr>
            </table>
            <div v-if="goodsTotal!==0" style="text-align:right;margin-top:10px;">
              <el-pagination small layout="prev, pager, next" :total="goodsTotal" :page-size="5" :current-page.sync="goodsPage" @current-change="findRetailGoods"></el-pagination>
            </div>
          </div>
          <el-form-item label="添加图片">
            <el-upload
              style="width: 400px;" ref="upload" :data="configPicData"
              class="upload-demo retailShopUpload" :auto-upload="false"
              action="/smartLight/web/retail/shopConfig/updateConfPic.do"
              accept=".jpg,.png"  :on-success="configPicSuccess" :on-change="configPicChange"
              :on-error="configPicError" :on-remove="configPicRemove"
              :file-list="configPicList" list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div scope="tip" class="el-upload__tip" style="color: red;" v-if="tabType===2">* 只能上传bmp,jpg,jpeg,png,gif文件，且不超过200KB，建议大小200*200</div>
              <div scope="tip" class="el-upload__tip" style="color: red;;" v-if="tabType===1">* 只能上传bmp,jpg,jpeg,png,gif文件，且不超过1M，建议大小750*600</div>
              <div scope="tip" class="el-upload__tip" style="color: red;;" v-if="tabType===3">* 只能上传bmp,jpg,jpeg,png,gif文件，且不超过1M，建议大小750*480</div>
              <div scope="tip" class="el-upload__tip" style="color: red;;" v-if="picTitle==='添加轮播图'||picTitle==='编辑轮播图'">* 轮播图最大支持10组</div>
              <div scope="tip" class="el-upload__tip" style="color: red;;" v-if="picTitle==='添加导航'||picTitle==='编辑导航'">* 导航图个数不限</div>
              <div style="margin-top: 15px;color: red;" class="el-upload__tip">{{prompt}}</div>
            </el-upload>
          </el-form-item>
          <div class="icon-blk" v-show="tabType===2">
            <img class="navi-icon" @click="selNaviIcon(index)" name="navi_icon" :id="'navi_icon_'+index" v-for="(item, index) in navImgsArr" :key="index" :src="urlPrefix + iconPrefix + item"/>
          </div>
        </el-form>
      </div>
      <div scope="footer" class="dialog-footer">
        <el-button @click="closePicDialog" :disabled="addPicLoading">取 消</el-button>
        <el-button type="primary" @click="doUpdatePic" :disabled="addPicLoading">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 商品推荐 -->
    <el-dialog :title="goodsRecommTitle" :visible.sync="goodsDialog" :close-on-click-modal="false" size="tiny" style="margin-top: -40px;" @close="updateGoodsIndex = -1;addTmpGoods = []">
      <div v-loading="addGoodsLoading">
        <el-form :model="addGoodsData" ref="addGoodsData" :rules="rules" label-width="120px">
          <el-form-item label="商品推荐名称" prop="goodsRecommendName">
            <el-input size="small" style="width:150px;" v-model="addGoodsData.goodsRecommendName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" >
            <el-select size="small" style="width:150px;" v-model="addGoodsData.style" >
              <el-option label="小图" value="small"></el-option>
              <el-option label="列表" value="list"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div>
          选择推荐商品<span style="margin-left:10px;color:red;">{{addGoodsMsg}}</span>
          <div class="mt10" v-if="addGoodsData.goods.length">
            <template v-for="(item,index) in addGoodsData.goods">
              <el-tag type="primary" style="margin-left:15px;max-width:350px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                {{item.goodsName}}
              </el-tag>
              <img class="img-size4" :src="urlPrefix + item.goodsMainUrl" style="vertical-align:middle;" />
            </template>
          </div>
        </div>
        <table class="mt10" style="border-collapse: collapse;width:430px;">
          <tr>
            <th >
              <input id="allCheck" class="box_css" type="checkbox" @click.stop="doAllCheckBox"/>
            </th>
            <th style="width:200px;">商品名称</th>
            <th style="width:90px;">商品主图</th>
            <th style="width:90px;">商品价格</th>
          </tr>
          <tr v-for="(item, index) in addTmpGoods" :key="index">
            <td>
              <input name="goodsBox" class="box_css" type="checkbox" :id="'goodsId'+item.goodsId" :checked="addGoodsIds.indexOf(item.goodsId) !== -1" @click.stop="selectGoods(item)"/>
            </td>
            <td><img class="img-size" src="../../../static/images/pin.png" v-if="item.isGroup" style="width:20px;height:20px;"/>{{item.goodsName}}</td>
            <td>
              <img class="img-size2" :src="urlPrefix + item.goodsMainUrl" />
            </td>
            <td>{{item.goodsPrice}}</td>
          </tr>
          <tr v-if="addTmpGoods.length==0">
            <td colspan="4"><span style="height:60px;line-height:40px;color:#5e7382">暂无数据</span></td>
          </tr>
        </table>
        <div v-if="goodsTotal!==0" style="text-align:right;margin-top:10px;">
          <el-pagination small layout="prev, pager, next" :total="goodsTotal" :page-size="5" :current-page.sync="goodsPage" @current-change="findRetailGoods"></el-pagination>
        </div>
        <div style="margin-top: 15px;color: red;" class="el-upload__tip">{{prompt}}</div>
      </div>
      <div scope="footer" class="dialog-footer" >
        <el-button @click="goodsDialog = false;updateGoodsIndex = -1;addTmpGoods = []">取 消</el-button>
        <el-button type="primary" @click="doUpdateGoodsRecommend">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import {resetBreads, sessionOut, buttonAuth} from '../../smartlight/common/js/util.js'
import $ from 'jquery'
import trl from './tr.vue'
export default {
  data () {
    var checkRecommendName = (rule, value, callback) => {
      if (/^\s+$/.test(value) || value === '') {
        callback(new Error('请输入推荐商品名称'))
      } else {
        callback()
      }
    }
    var checkNavigeteName = (rule, value, callback) => {
      if (this.configItem === 'navigate' && value === '') {
        callback(new Error('请输入导航名称'))
      } else {
        callback()
      }
    }
    var checkLinkUrl = (rule, value, callback) => {
      if (this.addPicture.linkType !== 'none' && value === '' && this.updateIndex < 0) {
        let msg = ''
        if (this.addPicture.linkType === 'group') {
          msg = '请选择商品分组'
        } else if (this.addPicture.linkType === 'goodsDetail') {
          msg = '请选择指定商品'
        }
        callback(new Error(msg))
      } else {
        callback()
      }
    }
    var checkMchId = (rule, value, callback) => {
      if (/\s+/.test(value)) {
        callback(new Error('商户号不能包含空格'))
      } else {
        if (value !== this.copyPayConf.mchId) {
          this.enablePayConf = true
        } else if (this.payConf.apiKey !== this.copyPayConf.apiKey) {
          this.enablePayConf = true
        } else {
          this.enablePayConf = false
        }
        callback()
      }
    }
    var checkApiKey = (rule, value, callback) => {
      if (/\s+/.test(value)) {
        callback(new Error('秘钥不能包含空格'))
      } else if (value.length !== 32) {
        callback(new Error('秘钥长度为32个字符'))
      } else {
        if (value !== this.copyPayConf.apiKey) {
          this.enablePayConf = true
        } else if (this.payConf.mchId !== this.copyPayConf.mchId) {
          this.enablePayConf = true
        } else {
          this.enablePayConf = false
        }
        callback()
      }
    }
    return {
      loginType: '',
      tabType: 0, // 页签类型 1=轮播图，2=导航，3首页推荐
      totalremind: 0,
      currentpage: 1,
      openremindList: [],
      isshow: false,
      iconPrefix: '', // 导航icon前缀
      urlPrefix: '', // 图片链接前缀
      loading: false, // loading开发
      isSetLunbo: true, // 是否设置轮播
      isSetNavigator: true, // 是否设置导航
      isSetIndex: true, // 是否设置主页推荐
      isSetGoods: true, // 是否设置商品推荐
      goodsType: true, // 商品列表类型开关：true=小图，false=列表
      colorSel: 'red', // 配色类型选择：red、pink、roseRed、yellow、green、blue、lightBlue、brown、violet、orange
      configItem: 'goodsStyle', // 配置项目名
      lunboList: [], // 轮播图数据
      indexRecommendList: [], // 首页推荐数据
      goodsRecommendList: [], // 商品推荐数据
      tmpGoodsRecommendList: '', // 临时商品推荐数据
      prompt: '', // 提示
      addGoodsData: {
        // id: 0, // 0=新增，1=修改
        goodsRecommendName: '', // 商品推荐名称
        style: 'small', // 列表演示: 默认小图
        goods: [] // 商品集合
      },
      addTmpGoods: [], // 应用管理商品集合
      addGoodsIds: [], // 商品id集合
      addGoodsMsg: '', // 选择推荐商品提示信息
      navigateList: [], // 导航数据
      selOptions: [
        {
          value: 'none',
          label: '无'
        },
        {
          value: 'goods',
          label: '全部产品'
        },
        {
          value: 'goodTypes',
          label: '产品分组'
        },
        {
          value: 'goodsDetail',
          label: '产品详情'
        },
        {
          value: 'about',
          label: '关于我们'
        },
        {
          value: 'helpCenter',
          label: '常见问题'
        }
      ],
      goodsStyle: '', // 商品列表样式
      color: '', // 配色
      modifyStyle: false, // 是否修改商品样式
      modifyColor: false, // 是否修改配色
      preStyleValue: '', // 更改前商品样式值
      preColorValue: '', // 更改前配色值
      pictureDialog: false, // 图片上传对话框
      goodsDialog: false, // 添加商品推荐对话框
      goodsTotal: 0, // 商品总数
      goodsPage: 1, // 商品页码
      rules: {
        goodsRecommendName: [
          { required: true, validator: checkRecommendName, trigger: 'blur' }
        ],
        navigateName: [
          { required: true, validator: checkNavigeteName, trigger: 'blur' }
        ],
        linkUrl: [
          {validator: checkLinkUrl, trigger: 'blur'}
        ],
        mchId: [
          { required: true, message: '商户号不能为空', trigger: 'blur' },
          { required: true, validator: checkMchId, trigger: 'blur' }
        ],
        apiKey: [
          { required: true, message: '秘钥不能为空', trigger: 'blur' },
          { required: true, validator: checkApiKey, trigger: 'blur' }
        ],
        wxCert: [
          { required: true, message: '请选择API证书', trigger: 'change' }
        ]
      },
      addGoodsLoading: false,
      addPicLoading: false,
      updateGoodsIndex: -1, // 修改商品推荐索引,默认为-1，修改为具体index
      tmpList: [],
      addPicture: { // 图片数据
        linkType: 'none', // 链接类型
        linkUrl: '', // 链接路径
        navigateName: '' // 导航名称
      },
      copyAddPicture: { // 编辑图片备份数据
        linkType: '', // 链接类型
        linkUrl: '', // 链接路径
        navigateName: '' // 导航名称
      },
      picTitle: '', // 上传图片框标题
      configPicData: {}, // 图片附件数据
      configPicList: [], // 图片集合
      showNavigateName: false, // 导航名称显示控制
      showLinkUrl: false, // 链接路径显示控制
      goodsGroupData: [], // 商品分组数据
      goodsGroupTotal: 0, // 商品总数
      goodsGroupPage: 1, // 商品页码
      tmpLinkUrl: 0, // 临时商品分组id
      hasPic: false, // 是否包含图片
      editPic: false, // 是否编辑图片：是=true，否=false
      deleteIndex: -1, // 删除项index
      updateIndex: -1, // 编辑项index
      goodsRecommTitle: '', // 商品推荐对话框标题
      qrcodeUrl: '', // 二维码地址
      copyLinkUrl: '', // 编辑用链接路径
      copyValueShow: false, // 链接文本显示控制
      radioIndex: -1, // 选中radio索引
      isChangePic: false, // 是否更改图片
      payConf: {
        mchId: '', // 商户号
        apiKey: '', // api秘钥
        wxCert: '' // api证书
      },
      wxCertList: [],
      uploadList: [],
      wxCertData: {},
      copyPayConf: {
        mchId: '', // 商户号
        apiKey: '', // api秘钥
        wxCert: ''
      },
      enablePayConf: false, // 支付设置保存控制
      retailButtons: [705, 706, 707, 708, 709, 710, 711, 712, 713, 714, 715, 716, 717], // 权限按钮菜单id
      // [配色保存,商品样式保存,轮播图添加,轮播图编辑,轮播图删除,导航添加,导航编辑,导航删除,首页推荐添加,首页推荐编辑,首页推荐删除,商品推荐添加,商品推荐编辑,商品推荐删除,支付保存]
      navImgsArr: [
        '1-1.png', '1-2.png', '1-3.png', '1-4.png', '1-5.png', '1-6.png', '1-7.png', '1-8.png', '1-9.png', '1-10.png',
        '2-1.png', '2-2.png', '2-3.png', '2-4.png', '2-5.png', '2-6.png', '2-7.png', '2-8.png', '2-9.png', '2-10.png',
        '3-1.png', '3-2.png', '3-3.png', '3-4.png', '3-5.png', '3-6.png', '3-7.png', '3-8.png', '3-9.png', '3-10.png',
        '4-1.png', '4-2.png', '4-3.png', '4-4.png', '4-5.png', '4-6.png', '4-7.png', '4-8.png', '4-9.png', '4-10.png',
        '5-1.png', '5-2.png', '5-3.png', '5-4.png', '5-5.png', '5-6.png', '5-7.png', '5-8.png', '5-9.png', '5-10.png',
        '6-1.png', '6-2.png', '6-3.png', '6-4.png', '6-5.png', '6-6.png', '6-7.png', '6-8.png', '6-9.png', '6-10.png',
        '7-1.png', '7-2.png', '7-3.png', '7-4.png', '7-5.png', '7-6.png', '7-7.png', '7-8.png', '7-9.png', '7-10.png',
        '8-1.png', '8-2.png', '8-3.png', '8-4.png', '8-5.png', '8-6.png', '8-7.png', '8-8.png', '8-9.png', '8-10.png',
        '9-1.png', '9-2.png', '9-3.png', '9-4.png', '9-5.png', '9-6.png', '9-7.png', '9-8.png', '9-9.png', '9-10.png',
        '10-1.png', '10-2.png', '10-3.png', '10-4.png', '10-5.png', '10-6.png', '10-7.png', '10-8.png', '10-9.png', '10-10.png'
      ],
      naviIconIndex: -1, // 选中默认导航图索引
      useNaviIcon: false // 是否使用默认导航图
    }
  },
  methods: {
    // API证书上传信息
    wxCertPreview (file) {
      window.open(file.url)
    },
    wxCertError () {
      this.enablePayConf = false
      this.$refs.wxcertUpload.clearFiles()
    },
    wxCertChange (file, fileList) {
      let fileName = file.name
      if (fileName !== 'apiclient_cert.p12') {
        this.$message.error('证书名称只能是：apiclient_cert.p12')
        this.$refs.wxcertUpload.clearFiles()
        return
      }
      if (fileList.length > 1) {
        fileList.splice(0, 1)
        this.enablePayConf = true
      } else if (fileList.length === 1) {
        this.enablePayConf = true
      } else {
        this.enablePayConf = false
      }
      this.payConf.wxCert = fileName
      this.uploadList = fileList
    },
    wxCertRemove (file, fileList) {
      this.payConf.wxCert = ''
      this.uploadList = []
      this.enablePayConf = false
    },
    wxCertSuccess (response, file, fileList) {
      this.enablePayConf = false // 禁用按钮
      var resBody = JSON.parse(this.decode(response))
      if (resBody.isSuccess === 0) { // 成功
        let entity = resBody.result
        this.copyPayConf.mchId = entity.mchId
        this.copyPayConf.apiKey = entity.apiKey
        this.copyPayConf.wxCert = entity.wxCert
//        if (entity.wxCert !== '') {
//          var cert = entity.wxCert.split('/')
//          this.wxCertList.push({name: cert[cert.length - 1], url: this.urlPrefix + entity.wxCert, status: 'success'})
//        }
        this.$message({
          showClose: true,
          message: resBody.errorMsg,
          type: 'success'
        })
      } else if (resBody.isSuccess === 2) { // 超时
        sessionOut(this)
      } else { // 失败
        this.$message({
          showClose: true,
          message: resBody.errorMsg,
          type: 'error'
        })
      }
    },
    handleCurrentChange (value) {
      if (!/^[0-9]*$/.test(value)) {
        // alert('删除')
      } else {
        this.currentpage = value
      }
      // 获取公众号关注者
      this.$http.post('/smartLight/web/openremind/getPageList.htm', {type: this.loginType, pageNumber: this.currentpage}).then(response => {
        let resBody = response.body
        if (resBody.isSuccess === 0) {
          this.openremindList = resBody.result.content
          this.totalremind = resBody.result.totalElements
          if (this.openremindList.length > 0) {
            this.isshow = true
          } else {
            this.isshow = true
          }
        } else {
          this.isshow = false
        }
      }).catch(() => {})
    },
    // 权限控制
    getAuth (index) {
      return buttonAuth(index, 1, [], this.retailButtons, [])
    },
    describPackage (content) {
      if (content.length > 50) {
        content = content.substring(0, 30) + '...'
      }
      return content
    },
    // 链接类型转中文
    linkType2CH (type) {
      let typeCh = ''
      switch (type) {
        case 'none':
          typeCh = '无'
          break
        case 'goods':
          typeCh = '全部产品'
          break
        case 'goodTypes':
          typeCh = '产品分组'
          break
        case 'goodsDetail':
          typeCh = '产品详情'
          break
        case 'about':
          typeCh = '关于我们'
          break
        case 'helpCenter':
          typeCh = '常见我们'
          break
        default:
          break
      }
      return typeCh
    },
    // 样式转中文
    style2CH (style) {
      let styleCh = ''
      switch (style) {
        case 'small':
          styleCh = '小图'
          break
        case 'list':
          styleCh = '列表'
          break
        default:
          break
      }
      return styleCh
    },
    // 切换标签事件
    switchTabPane (tab, event) {
      // let index = tab.index // 0=配色,1=商品样式,2=轮播图,3=导航,4=首页推荐,5=商品推荐,6=消息通知
      // if (index === '6' && this.qrcodeUrl === '') { // 消息通知标签
      //   this.getQrCodeUrl()
      // }
    },
    // 改变商品列表样式
    changeGoodsStyle (obj) {
      if (obj === this.preStyleValue) {
        this.modifyStyle = false
      } else {
        this.modifyStyle = true
      }
      if (obj === 'small') {
        this.goodsType = true
      } else if (obj === 'list') {
        this.goodsType = false
      }
    },
    // 改变配色
    changeColor (obj) {
      if (obj === this.preColorValue) {
        this.modifyColor = false
      } else {
        this.modifyColor = true
      }
      this.colorSel = obj
    },
    // 保存商品列表样式
    doUpdateStyle () {
      if (this.preStyleValue === this.goodsStyle) { // 商品列表样式不变
        this.modifyStyle = false
      } else {
        this.loading = true
        let params = {
          type: this.loginType,
          options: 5, // 更新商品样式操作
          goodsStyle: this.goodsStyle
        }
        this.$http.post('/smartLight/web/retail/shopConfig/updateShopConfig.htm', params).then(response => {
          this.loading = false
          let resBody = response.body
          let isSuccess = resBody.isSuccess
          if (isSuccess === 0) { // 成功
            this.$message({
              message: resBody.errorMsg,
              type: 'success'
            })
            this.preStyleValue = this.goodsStyle
            this.modifyStyle = false
          } else if (isSuccess === 2) { // 超时
            sessionOut(this)
          } else { // 失败
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      }
    },
    // 打开商品推荐对话框
    openGoodsDialog () {
      this.goodsRecommTitle = '添加商品推荐'
      this.goodsDialog = true
      // 初始化addGoodsData数据
      this.addGoodsData.goodsRecommendName = ''
      this.addGoodsData.style = 'small'
      this.addGoodsData.goods = []
      this.addGoodsIds = []
      this.goodsPage = 1
      this.addGoodsMsg = ''
      this.prompt = '* 商品推荐最多六组,推荐商品数量不大于20个'
      // 分页查询应用下的商品数据
      this.findRetailGoods(1)
    },
    // 编辑商品推荐
    editGoodsDialog (item, index) {
      this.goodsRecommTitle = '编辑商品推荐'
      this.goodsDialog = true
      // 初始化数据
      this.updateGoodsIndex = index
      this.addGoodsData.goodsRecommendName = item.goodsRecommendName
      this.addGoodsData.style = item.style
      let tmpGoods = JSON.stringify(item.goods)
      this.addGoodsData.goods = JSON.parse(tmpGoods)
      this.addGoodsIds = this.getGoodsId(item.goods)
      this.goodsPage = 1
      this.addGoodsMsg = ''
      this.prompt = '* 商品推荐最多六组,推荐商品数量不大于20个'
      // 分页查询应用下的商品数据
      this.findRetailGoods(1)
    },
    // 获取goods Id集合
    getGoodsId (goods) {
      let ids = []
      for (let i = 0; i < goods.length; i++) {
        ids.push(goods[i].goodsId)
      }
      return ids
    },
    // 分页查询应用的商品数据
    findRetailGoods (val) {
      let pageIndex = val
      let params = {
        type: this.loginType,
        pageIndex: pageIndex,
        pageSize: 5
      }
      // 后台查询
      this.$http.post('/smartLight/web/retail/shopConfig/getGoodsList.htm', params).then(response => {
        let resBody = response.body
        let isSuccess = resBody.isSuccess
        if (isSuccess === 0) { // 成功
          let datas = resBody.result
          let total = datas.total
          this.goodsTotal = total
          if (total > 0) {
            if (this.radioIndex > -1) {
              this.tmpLinkUrl = this.radioIndex
            }
            this.addTmpGoods = datas.list
            if (this.configItem === 'goodsRecommend') { // 商品推荐操作
              this.setAllcheckBox(this.addTmpGoods)
            }
          } else {
            if (this.configItem === 'goodsRecommend') {
              this.setAllcheckBox([])
            }
          }
        } else if (isSuccess === 2) { // 超时
          sessionOut(this)
        } else { // 失败
          this.$message({
            showClose: true,
            message: resBody.errorMsg,
            type: 'error'
          })
        }
      }).catch(() => {
      })
    },
    // 选中商品+取消选中商品
    selectGoods (item) {
      let id = item.goodsId
      let isChecked = $('#goodsId' + id).prop('checked') // 是否选中(boolean)
      if (isChecked && this.addGoodsIds.indexOf(id) === -1) { // 选中
        this.addGoodsData.goods.push(item)
        this.addGoodsIds.push(id)
      } else if (this.addGoodsIds.indexOf(id) > -1) { // 取消
        let index = this.addGoodsIds.indexOf(id)
        this.addGoodsIds.splice(index, 1)
        this.addGoodsData.goods.splice(index, 1)
      }
      this.setAllcheckBox(this.addTmpGoods)
    },
    // 全部选中或全部取消操作
    doAllCheckBox () {
      let isAllcheck = $('#allCheck').prop('checked')
      let boxs = $('input[name="goodsBox"]')
      if (isAllcheck) { // 全选
        boxs.each((index, box) => {
          box.checked = true
          let entity = this.addTmpGoods[index]
          let id = entity.goodsId
          if (this.addGoodsIds.indexOf(id) === -1) {
            this.addGoodsData.goods.push(entity)
            this.addGoodsIds.push(id)
          }
        })
      } else { // 全取消
        boxs.each((index, box) => {
          box.checked = false
          let entity = this.addTmpGoods[index]
          let id = entity.goodsId
          if (this.addGoodsIds.indexOf(id) > -1) {
            let index = this.addGoodsIds.indexOf(id)
            this.addGoodsIds.splice(index, 1)
            this.addGoodsData.goods.splice(index, 1)
          }
        })
      }
    },
    // 是否使能全选框
    setAllcheckBox (datas) {
      let dataLen = datas.length
      let idsLen = 0
      for (let i = 0; i < dataLen; i++) {
        if (this.addGoodsIds.indexOf(datas[i].goodsId) > -1) {
          idsLen++
        }
      }
      if (dataLen === idsLen && dataLen > 0) {
        $('#allCheck')[0].checked = true
      } else {
        $('#allCheck')[0].checked = false
      }
    },
    // 保存商品推荐
    doUpdateGoodsRecommend () {
      // 验证
      this.$refs.addGoodsData.validate((valid) => {
        if (valid) {
          // 选择推荐商品验证
          if (this.addGoodsIds.length === 0) {
            this.addGoodsMsg = '请选择推荐商品'
            return false
          } else if (this.addGoodsIds.length > 20) {
            this.addGoodsMsg = '推荐商品数量不大于20个'
            return false
          }
          // 商品推荐最多两组
          if (this.goodsRecommendList.length >= 6 && this.updateGoodsIndex === -1) {
            this.addGoodsMsg = '商品推荐最多支持六组'
            return false
          }
          this.addGoodsMsg = ''
          this.tmpGoodsRecommendList = JSON.stringify(this.goodsRecommendList)
          this.tmpList = JSON.parse(this.tmpGoodsRecommendList)
          if (this.updateGoodsIndex > -1) {
            this.tmpList.splice(this.updateGoodsIndex, 1) // 删除旧数据
          }
          this.tmpList.push(this.addGoodsData)
          // 后台保存
          this.modifyGoodsRecommend(this.tmpList)
        } else {
          return false
        }
      })
    },
    // 删除商品推荐
    deletGoodsRecommend (index) {
      this.$confirm('确定删除该商品推荐?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 执行删除
        this.tmpGoodsRecommendList = JSON.stringify(this.goodsRecommendList)
        this.tmpList = JSON.parse(this.tmpGoodsRecommendList)
        this.tmpList.splice(index, 1)
        this.modifyGoodsRecommend(this.tmpList)
      }).catch(() => {
      })
    },
    // 后台操作商品推荐
    modifyGoodsRecommend (goodsList) {
      let params = {
        type: this.loginType,
        options: 4, // 更新商品推荐
        goodsList: JSON.stringify(goodsList)
      }
      this.addGoodsLoading = true
      this.$http.post('/smartLight/web/retail/shopConfig/updateShopConfig.htm', params).then(response => {
        this.addGoodsLoading = false
        let resBody = response.body
        let isSuccess = resBody.isSuccess
        if (isSuccess === 0) { // 成功
          let tmp = JSON.stringify(this.tmpList)
          this.goodsRecommendList = JSON.parse(tmp)
          this.goodsDialog = false
        } else if (isSuccess === 2) { // 超时
          sessionOut(this)
        } else { // 失败
          this.$message({
            showClose: true,
            message: resBody.errorMsg,
            type: 'error'
          })
        }
      }).catch(() => {
        this.addGoodsLoading = false
      })
    },
    // 打开图片上传对话框 index:1=轮播图，2=导航，3=首页推荐
    openPicDialog (index) {
      if (index === 1) { // 轮播图
        this.picTitle = '添加轮播图'
        this.showNavigateName = false
        this.prompt = ''
        this.tabType = 1
      } else if (index === 2) {
        this.picTitle = '添加导航'
        this.showNavigateName = true
        this.prompt = ''
        this.tabType = 2
      } else if (index === 3) {
        this.picTitle = '添加首页推荐'
        this.showNavigateName = false
        this.prompt = '* 首页推荐最大支持10组'
        this.tabType = 3
      }
      this.pictureDialog = true
      this.editPic = false
    },
    // 打开图片上传对话框做编辑使用 type:1=轮播图，2=导航，3=首页推荐
    // index 编辑数据索引
    openPicDialogtoEdit (type, index) {
      this.updateIndex = index
      let linkType = ''
      let linkUrl = ''
      let navigateName = ''
      let picUrl = ''
      if (type === 1) { // 轮播图
        this.tabType = 1
        this.picTitle = '编辑轮播图'
        this.showNavigateName = false
        this.prompt = ''
        linkType = this.lunboList[index].linkType
        linkUrl = this.lunboList[index].linkUrl
        picUrl = this.lunboList[index].lunboUrl
      } else if (type === 2) {
        this.tabType = 2
        this.picTitle = '编辑导航'
        this.showNavigateName = true
        this.prompt = ''
        linkType = this.navigateList[index].linkType
        linkUrl = this.navigateList[index].linkUrl
        navigateName = this.navigateList[index].navigateName
        picUrl = this.navigateList[index].navigateUrl
      } else if (type === 3) {
        this.tabType = 3
        this.picTitle = '编辑首页推荐'
        this.showNavigateName = false
        this.prompt = '* 首页推荐最大支持10组'
        linkType = this.indexRecommendList[index].linkType
        linkUrl = this.indexRecommendList[index].linkUrl
        picUrl = this.indexRecommendList[index].recommendUrl
      }
      // 填充数据
      this.copyLinkUrl = linkUrl
      this.copyValueShow = true
      this.addPicture.linkType = linkType // 链接类型
      this.copyAddPicture.linkType = linkType // 备份链接类型
      this.addPicture.linkUrl = linkUrl // 链接路径
      this.copyAddPicture.linkUrl = linkUrl // 备份链接类型
      if (type === 2) {
        this.addPicture.navigateName = navigateName // 导航名称
        this.copyAddPicture.navigateName = navigateName // 备份链接类型
      }
      // 提取选中id
      if (linkType === 'group') { // 商品分组
        if (linkUrl.indexOf('&') >= 0) {
          let tmp1 = linkUrl.split('&')[0]
          let tmp3 = tmp1.substring(8)
          this.radioIndex = parseInt(tmp3)
        }
      } else if (linkType === 'goodsDetail') { // 商品详情
        if (linkUrl.indexOf('?') >= 0) {
          let tmp2 = linkUrl.split('?')[1]
          let tmp4 = tmp2.substring(3)
          this.radioIndex = parseInt(tmp4)
        }
      }
      // 触发链接类型select事件
      this.changeLinkType()
      // 还原图片
      let urlArr = picUrl.split('/')
      let name = urlArr[urlArr.length - 1]
      let picObj = {
        name: name,
        url: this.urlPrefix + picUrl
      }
      this.configPicList.push(picObj)
      console.log(this.configPicList)
      this.pictureDialog = true
      this.editPic = true
    },
    // 切换链接类型时间
    changeLinkType () {
      let type = this.addPicture.linkType
      if (type === 'none') {
        this.showLinkUrl = false
        this.addPicture.linkUrl = ''
      } else if (type === 'goods') {
        this.showLinkUrl = false
        this.addPicture.linkUrl = 'goodsList'
      } else if (type === 'goodTypes') {
        this.showLinkUrl = true
        this.addPicture.linkUrl = ''
        this.tmpLinkUrl = 0
        // 加载应用所属商品分组
        this.goodsGroupPage = 1
        this.findGoodsGroups(1)
      } else if (type === 'goodsDetail') {
        this.showLinkUrl = true
        this.tmpLinkUrl = 0
        // 查询商品列表
        this.goodsPage = 1
        this.findRetailGoods(1)
      } else if (type === 'about') {
        this.showLinkUrl = false
        this.addPicture.linkUrl = 'about'
      } else if (type === 'helpCenter') {
        this.showLinkUrl = false
        this.addPicture.linkUrl = 'helpCenter'
      }
    },
    // 关闭上传图片对话框
    closePicDialog () {
      this.pictureDialog = false
      // 数据初始化
      this.configPicList = []
      this.configPicData = {}
      this.addPicture.linkType = 'none'
      this.addPicture.linkUrl = ''
      this.addPicture.navigateName = ''
      this.copyAddPicture.linkType = ''
      this.copyAddPicture.linkUrl = ''
      this.copyAddPicture.navigateName = ''
      this.tmpLinkUrl = 0
      this.hasPic = false
      this.copyValueShow = false
      this.radioIndex = -1
      this.updateIndex = -1
      this.isChangePic = false
      this.useNaviIcon = false
      this.naviIconIndex = -1
      $('.navi-icon-sel').removeClass('navi-icon-sel')
    },
    // 上传图片错误处理
    configPicError () {
      this.$refs.upload.clearFiles()
    },
    // 图片上传change方法  type:1=轮播图，2=导航，3=首页推荐
    configPicChange (file, fileList) {
      this.useNaviIcon = false
      this.naviIconIndex = -1
      $('.navi-icon-sel').removeClass('navi-icon-sel')
      let sizeLimit = file.size / 1024 / 1024 <= 1
      if (this.tabType === 2) {
        sizeLimit = file.size / 1024 <= 200 // 200KB
      }
      if (!sizeLimit) { // size check
        if (this.tabType === 2) {
          this.$message.error('图片大小不能超过200KB')
        } else if (this.tabType === 1 || this.tabType === 3) {
          this.$message.error('图片大小不能超过1M')
        }
        this.$refs.upload.clearFiles()
        return
      } else { // type check
        let imgType = file.raw.type.substring(6)
        let suffixList = ['bmp', 'jpg', 'jpeg', 'png', 'gif']
        if (suffixList.indexOf(imgType) < 0) {
          this.$message.error('背景图片只能上传 bmp, jpg, jpeg, png, gif 文件')
          this.$refs.upload.clearFiles()
          return
        }
        if (fileList.length > 1) { // 是保留上传的最后一张图片
          fileList.splice(0, 1)
        }
        this.hasPic = true
        if (this.editPic) {
          this.isChangePic = true
        }
        // this.configPicList = fileList 不能复制，否则无法正常submit
      }
    },
    // 选中商品操作
    selGoodsRadio (item) {
      this.copyValueShow = false
      this.addPicture.linkUrl = 'goodsDetail?id=' + item.goodsId
      this.tmpLinkUrl = item.goodsId
    },
    // 选中商品分组
    selGroupRadio (item) {
      this.copyValueShow = false
      this.addPicture.linkUrl = 'groupId=' + item.id + '&groupName=' + item.name
      this.tmpLinkUrl = item.id
    },
    // 查询商品分组信息
    findGoodsGroups (val) {
      let pageIndex = val
      let params = {
        type: this.loginType,
        pageIndex: pageIndex,
        pageSize: 5
      }
      // 后台查询
      this.$http.post('/smartLight/web/retail/shopConfig/getGoodsGroups.htm', params).then(response => {
        let resBody = response.body
        let isSuccess = resBody.isSuccess
        if (isSuccess === 0) { // 成功
          let datas = resBody.result
          let total = datas.total
          this.goodsGroupTotal = total
          if (total > 0) {
            if (this.radioIndex > -1) {
              this.tmpLinkUrl = this.radioIndex
            }
            this.goodsGroupData = datas.list
          }
        } else if (isSuccess === 2) { // 超时
          sessionOut(this)
        } else { // 失败
          this.$message({
            showClose: true,
            message: resBody.errorMsg,
            type: 'error'
          })
        }
      }).catch(() => {
      })
    },
    // 图片移除钩子方法
    configPicRemove () {
      this.configPicList = []
      this.hasPic = false
      this.isChangePic = false
      this.useNaviIcon = false
      this.naviIconIndex = -1
      $('.navi-icon-sel').removeClass('navi-icon-sel')
    },
    // 图片上传成功方法
    configPicSuccess (response, file, fileList) {
      this.addPicLoading = false
      this.closePicDialog()
      this.updateIndex = -1
      this.copyValueShow = false // 链接文本显示控制
      this.radioIndex = -1 // 选中radio索引
      this.isChangePic = false // 是否更改图片
      let resBody = JSON.parse(this.decode(response))
      let isSuccess = resBody.isSuccess
      if (isSuccess === 0) { // 成功
        let datas = resBody.result
        let optype = datas.optype
        if (optype === 1) {
          this.lunboList = JSON.parse(datas.list)
        } else if (optype === 2) {
          this.navigateList = JSON.parse(datas.list)
        } else if (optype === 3) {
          this.indexRecommendList = JSON.parse(datas.list)
        }
      } else if (isSuccess === 2) { // 超时
        sessionOut(this)
      } else { // 失败
        this.$message({
          showClose: true,
          message: resBody.errorMsg,
          type: 'error'
        })
      }
    },
    // 更新图片
    doUpdatePic () {
      // 规则校验
      this.$refs.addPicture.validate((valid) => {
        if (valid) {
          if (!this.hasPic && this.configPicList.length === 0) {
            this.$message({
              message: '请添加图片',
              type: 'warning'
            })
            return false
          }
          let optype = 0
          let listData = ''
          if (this.configItem === 'lunbo') { // 轮播图
            optype = 1
            if (!this.editPic && this.lunboList.length >= 10) { // 新增
              this.$message({
                message: '轮播图最大支持10组',
                type: 'warning'
              })
              return
            }
            listData = JSON.stringify(this.lunboList)
          } else if (this.configItem === 'navigate') { // 导航
            optype = 2
//            if (!this.editPic && this.navigateList.length >= 4) { // 新增
//              this.$message({
//                message: '导航最大支持4组',
//                type: 'warning'
//              })
//              return
//            }
            listData = JSON.stringify(this.navigateList)
          } else if (this.configItem === 'indexRecommend') { // 首页推荐
            optype = 3
            if (!this.editPic && this.indexRecommendList.length >= 10) { // 新增
              this.$message({
                message: '商品推荐最大支持10组',
                type: 'warning'
              })
              return
            }
            listData = JSON.stringify(this.indexRecommendList)
          }
          // 更新图片上传
          if (this.editPic) { // 编辑图片上传
            // 无数据操作，直接关闭对话框
//            if (this.configPicList.length > 0 && this.addPicture.linkType === this.copyAddPicture.linkType && (this.addPicture.linkUrl === this.copyAddPicture.linkUrl || this.addPicture.linkUrl === '') && this.addPicture.navigateName === this.copyAddPicture.navigateName) {
//              this.closePicDialog()
//              return
//            }
            // 后台更新
            if (this.isChangePic) { // 更新图片
              this.addPicLoading = true
              this.configPicData.type = this.loginType
              this.configPicData.datas = JSON.stringify(this.addPicture)
              this.configPicData.optype = optype
              this.configPicData.list = listData // 原始数据
              this.configPicData.editPic = this.editPic
              this.configPicData.updateIndex = this.updateIndex
              this.configPicData.isChangePic = this.isChangePic
              this.$refs.upload.submit()
            } else { // 只更新字段
              let params = {
                type: this.loginType,
                datas: JSON.stringify(this.addPicture), // 更新的数据
                optype: optype,
                updateIndex: this.updateIndex,
                list: listData
              }
              // 是否使用系统图标
              if (this.useNaviIcon) {
                params.naviIconName = this.navImgsArr[this.naviIconIndex]
              }
              this.addPicLoading = true
              // 请求后台
              this.doUpdatePicData(params)
            }
          } else { // 新增图片
            this.addPicLoading = true
            this.configPicData.type = this.loginType
            this.configPicData.datas = JSON.stringify(this.addPicture)
            this.configPicData.optype = optype
            this.configPicData.list = listData // 原始数据
            this.configPicData.editPic = this.editPic
            if (this.useNaviIcon) { // 使用默认导航图片
              let params = {
                type: this.loginType,
                datas: JSON.stringify(this.addPicture), // 更新的数据
                optype: optype,
                updateIndex: this.updateIndex,
                list: listData,
                naviIconName: this.navImgsArr[this.naviIconIndex] // 系统导航图片名
              }
              this.doUpdatePicData(params)
            } else {
              this.$refs.upload.submit()
            }
          }
        } else {
          return false
        }
      })
    },
    // updatePicData
    doUpdatePicData (params) {
      // 请求后台
      this.$http.post('/smartLight/web/retail/shopConfig/updatePicData.htm', params).then(response => {
        let resBody = response.body
        let isSuccess = resBody.isSuccess
        this.addPicLoading = false
        if (isSuccess === 0) { // 成功
          this.closePicDialog()
          this.updateIndex = -1
          this.copyValueShow = false // 链接文本显示控制
          this.radioIndex = -1 // 选中radio索引
          this.isChangePic = false // 是否更改图片
          let datas = resBody.result
          let optype = datas.optype
          if (optype === 1) {
            this.lunboList = JSON.parse(datas.list)
          } else if (optype === 2) {
            this.navigateList = JSON.parse(datas.list)
          } else if (optype === 3) {
            this.indexRecommendList = JSON.parse(datas.list)
          }
        } else if (isSuccess === 2) { // 超时
          sessionOut(this)
        } else { // 失败
          this.$message({
            showClose: true,
            message: resBody.errorMsg,
            type: 'error'
          })
        }
      }).catch(() => {
        this.addPicLoading = false
      })
    },
    // 删除图片相关设置项
    delConfPic (index) {
      this.$confirm('确定要删除该设置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteIndex = index
        let opType = this.getOpType()
        let tmplist = []
        if (opType === 1) {
          tmplist = this.lunboList
        } else if (opType === 2) {
          tmplist = this.navigateList
        } else if (opType === 3) {
          tmplist = this.indexRecommendList
        }
        // 构造参数
        let params = {
          type: this.loginType,
          index: index, // 删除索引
          opType: opType, // 1=轮播，2=导航，3=首页
          list: JSON.stringify(tmplist)
        }
        // 后台操作
        this.$http.post('/smartLight/web/retail/shopConfig/deleteConfPic.do', params).then(response => {
          let resBody = response.body
          let isSuccess = resBody.isSuccess
          if (isSuccess === 0) { // 成功
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'success'
            })
            tmplist.splice(index, 1) // 除去已删除数据
            if (opType === 1) {
              this.lunboList = tmplist
            } else if (opType === 2) {
              this.navigateList = tmplist
            } else if (opType === 3) {
              this.indexRecommendList = tmplist
            }
            this.deleteIndex = -1
          } else if (isSuccess === 2) { // 超时
            sessionOut(this)
          } else { // 失败
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        }).catch(() => {})
      }).catch(() => {})
    },
    // 返回操作类型：1=轮播，2=导航，3=首页推荐
    getOpType () {
      let type = 0
      if (this.configItem === 'lunbo') {
        type = 1
      } else if (this.configItem === 'navigate') {
        type = 2
      } else if (this.configItem === 'indexRecommend') {
        type = 3
      }
      return type
    },
    // 获取二维码图片链接
    getQrCodeUrl () {
      this.$http.post('smartLight/gzhweixin/getImageurl.htm', {type: this.loginType}).then(response => {
        let resBody = response.body
        let isSuccess = resBody.res
        if (isSuccess === 0) { // 成功
          this.qrcodeUrl = resBody.url
        } else if (isSuccess === 2) { // 超时
          sessionOut(this)
        } else { // 失败
          this.$message({
            showClose: true,
            message: resBody.errorMsg,
            type: 'error'
          })
        }
      }).catch(() => {})
    },
    // 更新店铺支付设置
    updatePayConf () {
      // 规则校验
      this.$refs.payConf.validate((valid) => {
        if (valid) {
          let params = {
            type: this.loginType,
            mchId: this.payConf.mchId,
            apiKey: this.payConf.apiKey
          }
          // 选择上传的证件--submit上传提交数据
          if (this.uploadList.length > 0) {
            this.wxCertData.type = this.loginType
            this.wxCertData.mchId = this.payConf.mchId
            this.wxCertData.apiKey = this.payConf.apiKey
            this.wxCertData.wxCert = this.payConf.wxCert
            this.$refs.wxcertUpload.submit()
          } else {
            this.$http.post('/smartLight/web/retail/shopConfig/updatePayConf.htm', params).then(response => {
              let resBody = response.body
              let isSuccess = resBody.isSuccess
              if (isSuccess === 0) { // 成功
                let entity = resBody.result
                this.copyPayConf.mchId = entity.mchId
                this.copyPayConf.apiKey = entity.apiKey
                this.copyPayConf.wxCert = entity.wxCert
                this.enablePayConf = false
//                if (entity.wxCert !== '') {
//                  var cert = entity.wxCert.split('/')
//                  this.wxCertList.push({name: cert[cert.length - 1], url: this.urlPrefix + entity.wxCert, status: 'success'})
//                }
                this.$message({
                  showClose: true,
                  message: resBody.errorMsg,
                  type: 'success'
                })
              } else if (isSuccess === 2) { // 超时
                sessionOut(this)
              } else { // 失败
                this.$message({
                  showClose: true,
                  message: resBody.errorMsg,
                  type: 'error'
                })
              }
            }).catch(() => {})
          }
        } else {
          return false
        }
      })
    },
    // 选中默认导航图标
    selNaviIcon (index) {
      // 样式操作
      $('.navi-icon-sel').removeClass('navi-icon-sel')
      $('#navi_icon_' + index).addClass('navi-icon-sel')
      let name = this.navImgsArr[index]
      let picObj = {
        name: name,
        url: this.urlPrefix + this.iconPrefix + name
      }
      this.configPicList = []
      this.configPicList.push(picObj)
      this.useNaviIcon = true
      this.naviIconIndex = index
    }
  },
  created () {
    let user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.loginType = user.type
      let env = sessionStorage.getItem('env')
      this.urlPrefix = sessionStorage.getItem('prefix')
      this.iconPrefix = 'smartLight/' + env + '/pub/navi/'
      // 面包屑操作
      resetBreads(this)
      // 获取应用设置信息
      this.$http.post('/smartLight/web/retail/shopConfig/getShopConfig.htm', {type: this.loginType}).then(response => {
        let resBody = response.body
        let isSuccess = resBody.isSuccess
        if (isSuccess === 0) { // 成功
          let entity = resBody.result
          // 轮播图
          let tmpLunbo = entity.lunbo
          if (!/^\s*$/.test(tmpLunbo) && tmpLunbo !== undefined) { // 设置轮播图
            this.lunboList = JSON.parse(tmpLunbo)
            this.isSetLunbo = true
          } else { // 未设置轮播图
            this.isSetLunbo = false
          }
          // 导航
          let tmpNavigator = entity.navigate
          if (!/^\s*$/.test(tmpNavigator) && tmpNavigator !== undefined) { // 设置导航
            this.navigateList = JSON.parse(tmpNavigator)
            this.isSetNavigator = true
          } else { // 未设置导航
            this.isSetNavigator = false
          }
          // 首页推荐
          let tmpIndx = entity.indexRecommend
          if (!/^\s*$/.test(tmpIndx) && tmpIndx !== undefined) { // 设置首页推荐
            this.indexRecommendList = JSON.parse(tmpIndx)
            this.isSetIndex = true
          } else { // 未设置首页推荐
            this.isSetIndex = false
          }
          // 商品推荐
          let tmpGoods = entity.goodsRecommend
          if (!/^\s*$/.test(tmpGoods) && tmpGoods !== undefined) { // 设置首页推荐
            this.goodsRecommendList = JSON.parse(tmpGoods)
            this.isSetGoods = true
          } else { // 未设置首页推荐
            this.isSetGoods = false
          }
          // 商品样式
          let tmpGoodsStyle = entity.goodsStyle
          if (!/^\s*$/.test(tmpGoodsStyle) && tmpGoodsStyle !== undefined) { // 设置商品样式
            this.goodsStyle = tmpGoodsStyle
            if (tmpGoodsStyle === 'small') {
              this.goodsType = true
            } else {
              this.goodsType = false
            }
            this.preStyleValue = tmpGoodsStyle
          } else { // 未设置商品样式
            this.goodsStyle = 'small' // 默认值
            this.goodsType = true
            this.preStyleValue = ''
          }
          // 配色
          let tmpColor = entity.color
          if (!/^\s*$/.test(tmpColor) && tmpColor !== undefined) { // 设置商品样式
            this.color = tmpColor
            this.colorSel = tmpColor
            this.preColorValue = tmpColor
          } else { // 未设置商品样式
            this.color = 'red' // 默认值
            this.colorSel = 'red'
            this.preColorValue = ''
          }
        } else if (isSuccess === 2) { // 超时
          sessionOut(this)
        } else { // 失败
          this.$message({
            showClose: true,
            message: resBody.errorMsg,
            type: 'error'
          })
        }
      }).catch(() => {})
    } else { // 跳转登录页面
      sessionOut(this)
    }
  },
  components: {
    trl
  }
}
</script>
<style lang="stylus" scoped>
  .grid-content {
    border-radius: 4px;
    min-height: 550px;
  }
  .bg-purple {
    background: #F5F3F3;
  }
  .img-size {
    width 60px;
    height 50px;
  }
  .img-size2 {
    width 30px;
    height 25px;
  }
  .img-size3 {
    width 148px;
    height 17px;
    vertical-align middle;
  }
  .img-size4 {
    width 24px;
    height 20px;
  }
  .ml20 {
    margin-left 20px;
  }
  .ml80 {
    margin-left 80px;
  }
  .mt10 {
    margin-top 10px;
  }
  .mt20 {
    margin-top 20px;
  }
  .mt40 {
    margin-top 40px;
  }
  th{
    background-color: #eef1f6;
    border: 1px solid #dfe6ec;
    height: 40px;
    line-height: 40px;
  }
  td{
    border: 1px solid #dfe6ec;
    text-align center;
  }
  .border-b {
    border-bottom:1px solid #dfe6ec;
  }
  .padd-18-0 {
    padding 0px 0px;
  }
  .padd-15-0 {
    padding: 0px 0px;
  }
  .preImg {
    width 273px;
    height 555px;
    border-radius 40px;
  }
  .layout {
    width 310px;
    height 550px;
  }
  .mask_luobo {
    margin-left: 10px;
    width: 289px;
    height: 135px;
    top: 10px;
  }
  .mask_luobo_img {
    width: 289px;
    height: 127px;
    opacity:0.4;
    padding-top: 8px;
  }
  .mask_navigate {
    margin-left: 10px;
    width: 289px;
    height: 86px;
  }
  .mask_navigate_img {
    width: 289px;
    height: 78px;
    opacity:0.4;
    padding-top: 8px;
  }
  .mask_index {
    margin-left: 10px;
    width: 289px;
    height: 180px;
  }
  .mask_index_img {
    width: 289px;
    height: 172px;
    opacity:0.4;
    padding-top: 8px;
  }
  .mask_goods {
    margin-left: 10px;
    width: 289px;
    height: 280px;
  }
  .mask_goods_img {
    width: 289px;
    height: 272px;
    opacity:0.4;
    padding-top: 8px;
  }
  .box_css {
    zoom: 140%;
    vertical-align: middle;
    margin: 0px 0px;
  }
  .icon-blk {
    margin-left: 10px;
    max-height: 170px;
    overflow-y:scroll;
  }
  .navi-icon {
    margin: 5px 5px;
    width 30px;
    height 30px;
    cursor: pointer;
  }
  .navi-icon-sel {
    margin: 5px 5px;
    width 28px;
    height 28px;
    cursor: pointer;
    border: solid 1px grey;
  }
  .tablecss td div{height:50px;line-height:50px;padding:10px;
   }
   .shopname div{width:200px; overflow:hidden; text-overflow: ellipsis;white-space: nowrap;}
</style>
